<template>
  <div class="box111">
    <div id="main1" class="chart1"></div>
    <div id="toprightviewLines" class="chart"></div>
  </div>
</template>

<script>
import init from '@/components/Process/flowable/init';
import * as echarts from 'echarts';
import {alarmMonitoring} from '../../api/largeScreen/index.js'


export default {
  props: ['alarmMonitoringData'],
  data() {
    return {
      alertData:[],
    };
  },
  mounted() {
    setTimeout(()=>{
      this.init();
      this.showpieLinex();
    },200)

  },
  methods: {
    // 告警监控
    getalertData() {
      // 告警监控
      alarmMonitoring({
        storeId: this.storeId
      }).then(res => {
        console.log(res)
        if (res.code == 200 && res.data) {
          this.alarmMonitoringData[0].value = res.data.outage
          this.alarmMonitoringData[1].value = res.data.lowElectricity
          this.alarmMonitoringData[2].value = res.data.stop
          this.alarmMonitoringData[3].value = res.data.offline
          this.alarmMonitoringData[4].value = res.data.detach
          this.alarmMonitoringData[5].value = res.data.driveIn
          this.alarmMonitoringData[6].value = res.data.driveOut
          this.$nextTick(() => {
            this.init()
            this.showpieLinex();
          })
        } else {
          this.$nextTick(() => {
            this.init()
            this.showpieLinex();
          })
        }
      })

    },
    init() {
      var chartDom = document.getElementById('main1');
      var myChart = echarts.init(chartDom);
      myChart.clear();
      var option;
      var data = this.alarmMonitoringData
      option = {
        // tooltip: {
        //     trigger: 'item',
        //     backgroundColor: 'transparent',
        //     textStyle: {
        //         color: '#fff'
        //     }
        // },
        legend: {
          top: '0%',
          right: 'right',
          textStyle: {
            color: '#fff',
            fontSize: 12,
          },
          icon: 'circle',
          formatter: function (name) {
            let target
            for (let i = 0; i < data.length; i++) {
              if (data[i].name === name) {
                target = data[i].value
              }
            }
            var arr = [
              name + target
            ]
            return arr.join('  ')
          }
        },
        series: [
          {
            name: '告警',
            type: 'pie',
            radius: ['40%', '60%'],//圆环宽度
            center: ['36%', '51%'],//圆环位置
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              fontSize: 15,
              fontWeight: 'bold',
              formatter: '{b}\n\n {c}'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 10,
                fontWeight: 'bold',
                color: '#ffffff'
              }
            },
            labelLine: {
              show: false
            },
            data: data,
          }
        ]
      };

      option && myChart.setOption(option, true);
    },

    showpieLinex() {
      var myChartLine = echarts.init(document.getElementById('toprightviewLines'));
      myChartLine.clear();
      var tips = 0;
      var m = 0;
      var mm = 1;

      function loading() {
        return [{
          value: tips,
          itemStyle: {
            normal: {
              color: '#5c78a7', // 走过的颜色
            }
          }
        },
          {
            value: m,
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 4,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(255,255,255,0.7)' // 0% 处的颜色
                  }, {
                    offset: 0.3,
                    color: 'rgba(255,255,255,1)' // 0% 处的颜色
                  }, {
                    offset: 0.6,
                    color: 'rgba(255,255,255,1)' // 0% 处的颜色
                  }, {
                    offset: 0.8,
                    color: 'rgba(255,255,255,1)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(255,255,255,1)' // 100% 处的颜色
                  }],
                  globalCoord: false,
                },
                color: 'rgba(255,255,255,1)',
                shadowBlur: 12,
                shadowColor: 'rgba(255,255,255,1)'
              }
            }
          }, {
            value: 100 - tips,
            itemStyle: {
              normal: {
                color: '#344285', // 未走的线的颜色
              }
            }
          }
        ];
      }

      setInterval(function () {
        if (tips == 100) {
          tips = 0;
          m = 0;
        } else if (tips <= 10) {
          ++tips;
          ++m
        } else if (tips >= 90) {
          ++tips;
          --m
        } else {
          ++tips;
        }

        myChartLine.setOption({
          animation: false,
          animationThreshold: 100,
          animationDurationUpdate: function (idx) {
            // 越往后的数据延迟越大
            return idx * 1000;
          },
          series: [{
            name: 'loading',
            type: 'pie',
            radius: ['70%', '80%'],
            center: ['37%', '50%'],
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
              }
            },
            data: loading()
          }]
        }, true)
      }, 50);
    }
  },
};
</script>

<style lang="scss" scoped>
.box111 {
  width: 18vw;
  height: 9vw;
  display: flex;
  justify-content: space-around;

}

.chart {
  width: 18vw;
  height: 9vw;
  position: absolute;
  z-index: 2
}

.chart1 {
  width: 17vw;
  height: 9vw;
  position: absolute;
  z-index: 3
}
</style>
